<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="./css/global.css" rel="stylesheet" />
		<link href="./css/footer.component.css" rel="stylesheet" />
	</head>
	<body>
		<div id="app" data-v-app="">
			<div class="container d-flex justify-between"><img src="img/logo.png" class="mr-2 align-self-center"
					style="height: 50px;">
				<div class="mr-auto d-flex"><a href="./首页.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">首页</a><a
						href="./电影.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">电影</a><a
						href="./cinema_list.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-red text-white">影院</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">演出</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">榜单</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">热点</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">商城</a>
				</div>
				<div class="align-self-center d-flex mr-3"><input type="text"
						class="py-2 px-3 rounded-left outline-0 border-red-1" placeholder="找影视剧、影人、影院"><button
						class="text-white bg-red bg-hover-light-red py-2 px-3 outline-0 border-0 rounded-right"> 搜 索
					</button></div><a href="./login.html"
					class="align-self-center text-sm text-gray text-decoration-none text-hover-red mr-3"> 你好，请登录 </a><a
					href="./regist.html" class="align-self-center text-sm text-red text-decoration-none"> 免费注册 </a>
			</div>
			<div class="container my-4 d-flex justify-between align-items-start">
				<div class="w-75 px-2">
					<div class="py-3 px-4 shadow rounded">
						<div class="text-muted d-flex justify-center align-items-center"><img src="./img/seat01.png"
								class="mr-2">
							<div class="mr-4">可选座位</div><img src="./img/seat02.png" class="mr-2">
							<div class="mr-4">已售座位</div><img src="./img/seat03.png" class="mr-2">
							<div class="mr-4">已选座位</div><img src="./img/seat04.png" class="mr-2">
							<div>情侣座位</div>
						</div>
						<div align="center"><img src="./img/monitor.png" class="mt-3"></div>
						<div class="text-big text-muted text-bold text-center mt-2"> 荧幕位置 </div>
						<table align="center" border="0px" cellpadding="0px" cellspacing="4px"
							class="mt-4 text-sm text-muted text-bold">
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
				<div class="w-25 px-2">
					<div class="p-3 shadow rounded">
						<div class="d-flex justify-between"><img src="./img/film01.png" class="w-50 rounded">
							<div class="w-66 pl-3 d-flex flex-column justify-between">
								<div class="text-gray text-bold">指环王：护戒使者</div>
								<div class="mt-2 d-flex">
									<div class="text-xs text-muted mr-1">剧情</div>
									<div class="text-xs text-muted mr-1">动作</div>
									<div class="text-xs text-muted mr-1">冒险</div>
									<div class="text-xs text-muted mr-1">科幻</div>
								</div>
								<div class="mt-2 d-flex text-xs text-muted">179分钟 </div>
								<div class="mt-auto text-sm text-gray">万达影城（金山万达广场IMAX店）</div>
								<div class="mt-2 d-flex">
									<div class="text-xs text-muted mr-1">7号4DX厅</div>
									<div class="text-xs text-muted mr-1">英语4DX</div>
								</div>
								<div class="mt-2 d-flex text-xs text-red">
									<div class="mr-1">今天</div>
									<div class="mr-1">4月22日</div>
									<div class="mr-1">14:50</div>
								</div>
							</div>
						</div>
						<div class="py-3 border-bottom text-xs text-muted"><span class="mr-2">票价：</span><span
								class="text-red text-big text-bold mr-2">60.9</span><span
								class="text-red mr-2">元</span><span>（一次最多选6个座位）</span></div>
						<div class="pt-3 pb-2 border-bottom text-xs text-muted d-flex align-items-start">
							<div class="mr-2 py-1 w-15">座位：</div>
							<div class="d-flex flex-wrap w-85 selected">
								<!-- 已选座位 -->
							</div>
						</div>
						<div class="py-3 border-bottom text-xs text-muted"><span class="mr-2">总价：</span><span
								class="text-red text-big text-bold mr-2">182.7</span><span
								class="text-red mr-2">元</span></div><input type="text" placeholder="输入手机号"
							class="mt-3 w-100 py-2 px-3 border-gray-1 outline-0 rounded border-box"><input type="text"
							placeholder="填写验证码"
							class="mt-3 w-100 py-2 px-3 border-gray-1 outline-0 rounded border-box"><button
							class="mt-3 text-white bg-red bg-hover-light-red w-100 border-box py-2 border-0 outline-0 hand rounded">确认选座</button>
					</div>
				</div>
			</div>
			<div class="footer-background">
				<div class="container footer">
					<div class="footer-left">
						<div class="footer-left-column">
							<div class="footer-primary">学掌门院线</div>
							<div class="footer-secondary">中国影迷使用得更多的院线平台</div>
							<div class="footer-secondary">学掌门平台打造的<span class="orange">"影视神器"</span></div>
							<div class="footer-secondary"><span class="orange">60,000</span> 多个专业分类</div>
							<div class="footer-secondary"><span class="orange">600,000</span> 多个影视资源</div>
							<div class="footer-secondary"><span class="orange">760,000,000</span> 多条影评</div>
							<div class="footer-secondary"><span class="orange">38,000</span> 多个影院</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">关于我们</div>
							<div class="footer-secondary">关于学掌门</div>
							<div class="footer-secondary">隐私政策</div>
							<div class="footer-secondary">院线平台服务协议</div>
							<div class="footer-secondary">网络信息侵权通知指引</div>
							<div class="footer-secondary">学掌门院线服务监督员</div>
							<div class="footer-secondary">网站地图</div>
							<div class="footer-secondary">联系我们</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">Vip服务</div>
							<div class="footer-secondary">院线攻略 免费体验</div>
							<div class="footer-secondary">影院问答 评估指南</div>
							<div class="footer-secondary">专业咨询 海量片源</div>
							<div class="footer-secondary">偏好设置 随机抽奖</div>
							<div class="footer-secondary">自动评论 账单统计</div>
							<div class="footer-secondary">消费分析 APP下载</div>
							<div class="footer-secondary">诱惑活动 发现更多</div>
						</div>
					</div>
					<div class="footer-right">
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门APP </div>
							<div class="footer-right-primary"> 扫描立即下载 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 订阅号 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 官方服务号 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.6.1.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/seat.js"></script>
	</body>
</html>
